<template>
	<s-layout title="解锁平铺图-多角度图片">
		<uni-forms
				ref="addressFormRef"
				v-model="state.model"
				validateTrigger="bind"
				labelWidth="160"
				labelAlign="left"
				border
				:labelStyle="{ fontWeight: 'bold' }"
		>
			<view class="bg-white form-box ss-p-x-30">
				<uni-forms-item name="wareId" label="商品ID" class="form-item">
					<uni-easyinput
							v-model="state.model.wareId"
							placeholder="请填写商品ID"
							:inputBorder="false"
							placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
					/>
					<template #right>
						<button style="width: 120rpx; color: #FFFFFF; background: #459cff" class="ss-reset-button ui-Shadow-Main" @tap="onScanProductId">扫码</button>
					</template>
				</uni-forms-item>

				<uni-forms-item
						name="storageImgUrl"
						label="拍摄图片"
						class="form-item"
				>
					<uni-file-picker
							@delete="e => onDelete(e)"
							ref="uploadStorage"
							v-model="state.model.pickerVal"
							fileMediatype="image"
							limit="10"
							:auto-upload="false"
							@select="e => onSelect(e)"
							>
					</uni-file-picker>
				</uni-forms-item>
			</view>
		</uni-forms>
		<view v-if="state.wareInfo.image">
			<view v-for="(item,index) in state.wareInfo.image.split(',')">
				<su-image
						class="content-img"
						isPreview
						:previewList="state.wareInfo.image.split(',')"
						:current="index"
						:src="item"
						mode="aspectFit"
				></su-image>
			</view>
		</view>
		<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
			<view class="footer-box ss-flex-col ss-row-between ss-p-20">
				<view class="ss-m-b-20" style="display: flex; justify-content: center">
					<button style="width: 40%; color: #FFFFFF; background: #459cff" class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSearch">查询</button>
					<button style="width: 40%; color: #FFFFFF; background: #1fe85e" class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSave">入库</button>
				</view>
			</view>
		</su-fixed>
		<su-dialog ref="suDialogRef"
		           :show="state.wareInfo.show"
		           title="货物详情"
		           @confirm="state.wareInfo.show = false"
		           @cancel="state.wareInfo.show = false">
			<view class="ss-flex-col ss-p-20">
				<text style="font-size: 45rpx; font-weight: bold; text-align: center">ID：{{ state.model.wareId }}</text>
				<image style="width: 500rpx; height: 500rpx" :src="sheep.$url.cdn(state.wareInfo.image)" mode="aspectFill"></image>
			</view>
		</su-dialog>
	</s-layout>
</template>

<script setup>
import { computed, watch, ref, reactive, unref } from 'vue';
import sheep from '@/sheep';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import _ from 'lodash';
import { name, phone, detailAddress, region } from '@/sheep/validate/form';
// 引入baseUrl
import { baseUrl } from '@/sheep/config';

const addressFormRef = ref(null);
const state = reactive({
	showRegion: false,
	wareInfo: {
		show: false,
		image: '',
		title: '',
		status: undefined,
	},
	model: {
		wareId: '',
		wareType: 0,
		storageImgUrl: '',
		storageImgUrlList: [],
		pickerVal: 0,
		freightHeight: 0.0,
		wareTypeList: [
			{
				text: '煤炉',
				value: 0,
			}
			/*,
			{
				text: '骏河屋',
				value: 1,
			}*/
		],
	}
});

//选择售后类型
function onRefundChange(e) {
	state.model.wareType = e.detail.value;
}

function onSelect(e) {
	console.log(e, 'select')
	console.log(state.model.storageImgUrlList, 'storageImgUrlList')
	const tempFilePaths = e.tempFilePaths
	state.model.storageImgUrlList.push(tempFilePaths[0])
}

function onDelete(e) {
	console.log(e, 'delete')
	console.log(state.model.storageImgUrlList, 'storageImgUrlList-delete-before')
	state.model.storageImgUrlList.splice(e.tempFilePath, 1)
	console.log(state.model.storageImgUrlList, 'storageImgUrlList-delete-after')
}

function onSearch() {
	if (sheep.$helper.isRealEmpty(state.model.wareId)) {
		sheep.$helper.toast('请填写商品ID');
		return;
	}
	sheep.$api.order.inStorageSearch({
		wareId: state.model.wareId,
		wareType: state.model.wareType
	}).then(res => {
		if (!sheep.$helper.isRealEmpty(res)) {
			state.wareInfo.show = true;
			state.wareInfo.image = res.pic;
			state.wareInfo.status = res.status;
		}
	})
}

async function uploadFiles(urls) {
	if (urls.length === 0) {
		return; // 所有文件上传完成，结束递归
	}

	const filePath = urls[0];

	try {
		const res = await uni.uploadFile({
			url: baseUrl + '/no-auth/oss/upload',
			filePath: filePath,
			name: 'file'
		});

		if (res.statusCode === 200) {
			let data = JSON.parse(res.data);
			if (!sheep.$helper.isRealEmpty(data.url)) {
				state.model.storageImgUrl += data.url + ',';
			} else {
				sheep.$helper.toast(`图片${i + 1}上传失败，请稍后重新拍摄`);
			}
		}

	} catch (error) {
		sheep.$helper.toast(`图片${i + 1}上传失败，请稍后重新拍摄`);
	}

	// 继续上传下一个文件
	await uploadFiles(urls.slice(1));
}

async function onSave() {
	uni.showLoading({
		title: '上传中...',
		mask: true
	});

	try {
		await uploadFiles(state.model.storageImgUrlList);

		uni.hideLoading();

		if (sheep.$helper.isRealEmpty(state.model.wareId)) {
			sheep.$helper.toast('请填写商品ID');
			return;
		}
		if (sheep.$helper.isRealEmpty(state.model.wareType)) {
			sheep.$helper.toast('请选择商品类型');
			return;
		}
		if (sheep.$helper.isRealEmpty(state.model.storageImgUrl)) {
			sheep.$helper.toast('请上传图片');
			return;
		}

		state.model.storageImgUrl = state.model.storageImgUrl.substring(0, state.model.storageImgUrl.length - 1);

		await sheep.$api.order.updateStoragePicMulti({
			wareId: state.model.wareId,
			wareType: state.model.wareType,
			storageImgUrl: state.model.storageImgUrl
		}).then(res => {
			let content = "";
			if (!sheep.$helper.isRealEmpty(res.memberId) && res.status === 1) {
				content = `拍摄成功(●'◡'●) | 会员ID: ${res.memberId} | 订单备注: ${res.note} | 平台备注: ${res.merchantNote}`;
			} else {
				content = `拍摄失败ಠ_ಠ | 请重新尝试，多次失败请联系管理员~`;
			}

			uni.showModal({
				title: '提示',
				content: content,
				showCancel: false,
				success: function (res) {
					if (res.confirm) {
						uni.reLaunch({
							url: '/pages/app/storageMulti'
						});
					}
				}
			});
		})
	} catch (error) {
		uni.hideLoading();
		console.error(error);
	}
}


onLoad(async (options) => {

});
</script>

<style lang="scss" scoped>
:deep() {
	.uni-forms-item__label .label-text {
		font-size: 28rpx !important;
		color: #333333 !important;
		line-height: normal !important;
	}

	.uni-easyinput__content-input {
		font-size: 28rpx !important;
		color: #333333 !important;
		line-height: normal !important;
		padding-left: 0 !important;
	}

	.uni-easyinput__content-textarea {
		font-size: 28rpx !important;
		color: #333333 !important;
		line-height: normal !important;
		margin-top: 8rpx !important;
	}

	.uni-icons {
		font-size: 40rpx !important;
	}

	.is-textarea-icon {
		margin-top: 22rpx;
	}

	.is-disabled {
		color: #333333;
	}
}

.default-box {
	width: 100%;
	box-sizing: border-box;
	height: 100rpx;

	.default-box-title {
		font-size: 28rpx;
		color: #333333;
		line-height: normal;
	}
}

.footer-box {
	.save-btn {
		width: 710rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		color: $white;
	}

	.cancel-btn {
		width: 710rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: var(--ui-BG);
	}
}
</style>
